<DOCTYPE html>
<html>
<head></head>
<body>
<canvas class="process" width="48px" height="48px">0%</canvas>  
<script src="./publicJs/jquery.js"></script>
	<script>
	var text;
	var process;
	var canvas;
	var context;
	var i = 0;
	
	var timer = setInterval(function(){
		init(i);
		i++;
		if(i>100){
			clearInterval(timer);
		}
	},200);
	
	function init(num){
		initDraw();
		dropZone();
		drawProcess(num);
		drawInWhite();
		drawLine();
		drawFont(num);	
	}
	
	//初始化画布
	function initDraw(){
		// 第一部先拿到canvas标签中间的文字,就是那个61%)
        //text = $(".process").text();
        //process = text.substring(0, text.length-1);
        // 一个canvas标签
        canvas = $(".process")[0];
		// 拿到绘图上下文,目前只支持"2d"
       context = canvas.getContext('2d');
		// 将绘图区域清空,如果是第一次在这个画布上画图,画布上没有东西,这步就不需要了
        context.clearRect(0, 0, 48, 48);
	}
	
	// 画进度
	function drawProcess(pro){	
		console.log("drawProcess");
        context.beginPath();
        // 画扇形的时候这步很重要,画笔不在圆心画出来的不是扇形
        context.moveTo(24, 24);
		// 跟上面的圆唯一的区别在这里,不画满圆,画个扇形
		console.log("DrawPeocess: ",pro);
        context.arc(24, 24, 24, 0, Math.PI * 2 * pro / 100, false);
        context.closePath();
        context.fillStyle = '#e74c3c';
        context.fill();
	}
	
	// 开始画一个灰色的圆
	function dropZone(){
		console.log("drwaZone");
        context.beginPath();
		// 坐标移动到圆心
        context.moveTo(24, 24);
		// 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针
        context.arc(24, 24, 24, 0, Math.PI * 2, false);
        context.closePath();
		// 填充颜色
        context.fillStyle = '#ddd';
        context.fill();
		// 灰色的圆画完
	}
	
	// 画内部空白
	function drawInWhite(){
		console.log("drawInWhite");
        context.beginPath();
        context.moveTo(24, 24);
        context.arc(24, 24, 21, 0, Math.PI * 2, true);
        context.closePath();
        context.fillStyle = 'rgba(255,255,255,1)';
        context.fill();
	}
	
	// 画一条线
	function drawLine(){
		console.log("drawLine");
        context.beginPath();
        context.arc(24, 24, 18.5, 0, Math.PI * 2, true);
        context.closePath();
		// 与画实心圆的区别,fill是填充,stroke是画线
        context.strokeStyle = '#ddd';
        context.stroke();
	}
	
	//在中间写字
	function drawFont(num){
		console.log("drawFont");
        context.font = "bold 9pt Arial";
        context.fillStyle = '#e74c3c';
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.moveTo(24, 24);
		console.log("drawFont:",num)
        context.fillText(num+"%", 24, 24);
	}
</script>
</body>
</html>